<template>
	<view class="pwd">
		<view class="phone">
			<image class="phone_img" src="../../static/set/set_phone.png"></image>
			<input class=" uni-input-phone" type="number" v-model="mobile" placeholder="请输入手机号" maxlength="11" />
		</view>
		<view class="code">
			<image class="code_img" src="../../static/set/set_code.png"></image>
			<input class=" uni-input" type="number" v-model="code" placeholder="请输入验证码" maxlength="4" />
			<button class="btn-get-code" @click="getCode" :disabled="disableGetCode">{{ buttonText }}</button>
		</view>

		<view class="new_pwd">
			<text>新密码: </text>
			<!-- v-model="mobile -->
			<input class=" uni-input" v-model='newPwd' placeholder="请输入新密码" />
		</view>
		<view class="new_pwd1">
			<text>新密码: </text>
			<!-- v-model="mobile"-->
			<input class=" uni-input" v-model='newPwd2' placeholder="请确认新密码" />
		</view>
		<view class="btnSubmit">
			<button class="btn-submit" @click="submitBtnClik">提交</button>

		</view>
	</view>
</template>

<script>
	import ajax from '@/api/api.js'
	import url from '@/api/url.js'

	export default {
		data() {
			return {
				mobile: '', //手机号
				code: '', //验证码
				buttonText: "获取验证码",
				countdown: 60, //倒计时
				disableGetCode: false, //是否发送短信
				newPwd: '', //新密码
				newPwd2: '', //确认新密码

			}


		},
		methods: {
			//获取验证码
			getCode() {
				// 如果手机号为空或手机号格式不正确
				if (!this.mobile || !/^1\d{10}$/.test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return false
				}
				// 如果短信验证码已发送，不再重复发送

				if (this.buttonText !== '获取验证码') {

					return false

				}

				//请求发送验短信验证码接口
				this.$londing();
				ajax(url.loginSendSms, {
					data: {
						mobile: this.mobile,

					}
				}).then(res => {
					if (res.statusCode === 200) {
						this.disableGetCode = true
					}
					let timer = setInterval(() => {
						if (this.countdown > 1) {
							this.countdown--
							// this.buttonText = ${this.countdown}
							this.buttonText = this.countdown + 's'
						} else {
							clearInterval(timer)
							this.buttonText = '获取验证码'
							this.countdown = 60
							this.disableGetCode = false
						}
					}, 1000)
					uni.showToast({
						title: '验证码已发送,请注意查收',
						icon: 'none'
					})


				}).catch(err => {
					console.error(err)
					uni.showToast({
						title: '服务器故障,请稍后再试',
						icon: 'none'
					})
				})
			},

			//提交修改
			submitBtnClik() {

				if (this.disableGetCode === false) {

					uni.showToast({
						title: '请获取验证码',
						icon: 'none'
					})
					return
				}
				if (this.code.length === 0) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (this.newPwd.length === 0) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (this.newPwd2.length === 0) {
					uni.showToast({
						title: '请输入确认密码',
						icon: 'none'
					})
					return
				}
				if (this.newPwd != this.newpwd2) {
					uni.showToast({
						title: '两次输入的密码不一致!',
						icon: 'none'
					})
					return
				}


				this.$londing();
				ajax(url.forgetLogin, {
					data: {
						mobile: this.mobile,
						password: this.newPwd,
						password2: this.newpwd2,
						code: this.code,
					}
				}).then(res => {
					// if res.data.code === 1 {
					uni.showToast({
						title: res.data.meg,
					})

					uni.navigateBack()
					// }
				}).catch(err => {
					console.error(err)
					uni.showToast({
						title: '服务器故障,请稍后再试',
						icon: 'none'
					})
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}

	.pwd {


		.phone {
			padding: 50rpx 0 20rpx 30rpx;
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			.phone_img {
				width: 38rpx;
				height: 38rpx;
			}

			.uni-input-phone {
				margin-left: 46rpx;
				font-size: 15px;
			}

		}

		.code {
			padding: 50rpx 0 20rpx 30rpx;
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			.code_img {
				width: 38rpx;
				height: 38rpx;
			}

			.uni-input {
				margin-left: 46rpx;
				font-size: 15px;
			}

			.btn-get-code {
				margin-top: -20rpx;
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #fff;
				background-color: $global-Theme-color;
				border-radius: 30rpx;

			}

			.btn-get-code[disabled] {
				background-color: #ccc;

			}
		}

		.new_pwd {
			padding: 50rpx 0 20rpx 30rpx;

			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			.uni-input {
				margin-left: 46rpx;
				font-size: 15px;
			}
		}

		.new_pwd1 {
			padding: 50rpx 0 20rpx 30rpx;
			display: flex;
			flex-direction: row;
			border-bottom: 1px solid #eee;

			.uni-input {
				margin-left: 46rpx;
				font-size: 15px;
			}
		}

		.btnSubmit {
			margin-top: 160rpx;
			line-height: 100rpx;

			.btn-submit {
				margin-top: 10rpx;
				width: 400rpx;
				line-height: 80rpx;
				font-size: 36rpx;
				color: #fff;
				background-color: $global-Theme-color;
				border-radius: 40rpx;
			}
		}
	}
</style>